<template>
	<view class="distributionDetails">
		<view class="distributionDetails_haber">
			<view class="myEarnings">
				<view class="bgImg"></view>
				<view class="myEarnings_text">
					<view class="tp"><text>店铺余额</text></view>
					<view class="ct"><text>￥{{balance}}</text></view>
					<view class="bt"><text>结算时间：{{time}}</text></view>
				</view>
				<view class="myEarnings_withdraw">
					<image class="withdrawImg" src="/static/user/my/bg_tixian@2x.png"></image>
					<view class="withdrawImg_Text" @tap="tixian">
						<text>提现</text>
						<image class="rightImg" src="/static/user/my/icon_you_red@2x.png"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="distributionDetails_content">
			<image class="conten_bg" :src="ossUrl+'2025/02/04/6c6e7ad8eaaa4b539414e4eb865c0da3.jpg'"></image>
			<view class="half-circle"></view>
			<view class="income_details">
				<view class="income_title"><text>收支明细</text></view>
				<view v-for="(item,index) in list" :key="index">
					<view @tap="goEarningsDetils(item)" class="income_item" v-if="item.type*1===0">
						<view class="item_lt">
							<image class="income_icon" src="/static/user/my/icon_shouyi@2x.png"></image>
							<view class="income_name">
								<view class="tp"><text>收益{{item.title}}</text></view>
								<view class="bt"><text>{{item.createTime}}</text></view>
							</view>
						</view>
						<view class="item_rt">
							<text v-show="item.amount">+{{item.amount}}</text>
						</view>
					</view>
					<view class="income_item" @tap="goEarningsDetils(item)" v-else>
						<view class="item_lt">
							<image class="income_icon" src="/static/user/my/icon_tixian@2x.png"></image>
							<view class="income_name">
								<view class="tp"><text>提现{{item.title}}</text></view>
								<view class="bt"><text>{{item.createTime}}</text></view>
							</view>
						</view>
						<view class="withdraw_rt">
							<text v-show="item.amount">-{{item.amount}}</text>
						</view>
					</view>
				</view>
				<view class="noneData" v-if="!list.length">
					<text>暂无数据</text>
				</view>
			</view>

		</view>
		<tui-modal :Top="'-20vh'" :show="modal" custom>
			<view class="tui-modal-custom">
				<view @tap="modal=false,show=false" style="text-align: right;width: 100%;"><text>取消</text></view>
				<view class="tui-form__box">
					<view class="tui-title">提现金额</view>
					<view class="tui-input__box" @tap="focus">
						<view class="tui-symbol">￥</view>
						<view class="tui-input">{{value}}</view>
						<view class="tui-cursor" v-if="cursor"></view>
					</view>
				</view>
				<tui-digital-keyboard :buttonText="text" :show="show" :disabled="value==''" :isDecimal="false"
					@click="keyTap" @backspace="backspace" @confirm="confirm"></tui-digital-keyboard>
			</view>
		</tui-modal>
		<!-- 分享点击按钮 -->
		<!-- <image @tap="goCodeDetils" class="share_icon" src="/static/user/my/icon_tuiguangma@2x.png"></image> -->
	</view>
</template>

<script>
	import {
		getOrderIncomeInfo,
		getBalance,
		getWithdrawSum,
		applyWithdraw
	} from "@/http/api/distribution/distribution.js"
	import Cache from "@/utils/cache";
	export default {
		data() {
			return {
				top: 0, //标题图标距离顶部距离
				marginTp: 0,
				modal: false,
				list: [], //用户明细
				ossUrl: getApp().globalData.ossurl, //图片前缀
				show: false,
				value: '',
				cursor: false,
				text: '提现',
				withdrawSum: 0,
				time: this.$utils.getCurrentDate(),
				balance: null, //余额
			}
		},
		mounted() {
			let {
				startDate,
				endDate
			} = this.$utils.getLast30DaysRange()
			//查询明细
			getOrderIncomeInfo({
				id: this.$store.state.userShopDetails.id,
				type: 3,
				starDate: startDate,
				endDate: endDate
			}).then(res => {
				if (res.code === 200) {
					this.list = res.data
				}
			})
			//查询余额
			getBalance().then(res => {
				if (res.code === 200) {
					this.balance = res.data * 1
				}
			})
			//查询提现整数倍
			getWithdrawSum().then(res => {
				if (res.code === 200) {
					this.withdrawSum = res.data * 1
				}
			})
		},
		methods: {
			initNavigation(e) {
				this.top = e.top;
				this.marginTp = e.height
			},
			back() {
				uni.navigateBack({
					delta: 1
				});;
			},
			tixian() {
				if (this.balance * 1) {
					this.modal = true
				} else {
					this.$utils.toast('暂无提现金额');
				}
			},
			goCodeDetils() {
				uni.navigateTo({
					url: '/pages/distributionControl/modules/extensionCode/extensionCode'
				})
			},
			goEarningsDetils(item) {
				uni.navigateTo({
					url: '/pages/distributionControl/modules/earningsDetils/earningsDetils?id=' + item.id +
						'&orderId=' + item.orderId + '&amount=' + item.amount
				})
			},
			focus() {
				this.text = '提现';
				this.cursor = true;
				this.show = true;
			},
			keyTap(e) {
				console.log(e)
				let keyVal = e.value;
				let value = this.value;
				if (~value.indexOf('.') && keyVal == '.') return;
				//最大9位，自行控制即可
				if (value.length == 9) {
					this.tui.toast('超过限制位数，不可输入')
					return
				}
				if (!this.value && keyVal == '.') {
					this.value = '0.'
				} else {
					this.value = this.value + e.value;
				}
			},
			backspace(e) {
				let val = this.value;
				if (val) {
					this.value = val.substring(0, val.length - 1)
				}
			},
			confirm(e) {
				applyWithdraw({
					amount: Number(this.value)
				}).then(res => {
					if (res.code === 200) {
						this.show = false;
						this.cursor = false;
						this.tui.toast('提现成功')
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import './distributionControl.scss';

	.noneData {
		position: absolute;
		top: 200rpx;
		left: calc(50vw - 80rpx);
		width: 160rpx;
	}

	.tui-form__box {
		background-color: #fff;
		padding: 0 50rpx 60rpx;
		box-sizing: border-box;
	}

	.tui-title {
		padding: 60rpx 0;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	.tui-input__box {
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid rgba(0, 0, 0, .1);
		height: 88rpx;
		padding-bottom: 2rpx;
	}

	.tui-symbol {
		font-size: 60rpx;
		font-weight: bold;
	}

	.tui-input {
		font-size: 80rpx;
		line-height: 80rpx;
		font-weight: bold;
		padding-right: 6rpx;
	}

	.tui-cursor {
		display: block;
		width: 2px;
		border-radius: 2px;
		height: 88rpx;
		animation: blink 1s infinite steps(1, start)
	}

	@keyframes blink {
		0% {
			background-color: white;
		}

		50% {
			background-color: #5677fc;
		}

		100% {
			background-color: white;
		}
	}
</style>